<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19_数字时钟案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url('images/clock.jpeg') no-repeat;
            position: relative;
        }
        #hour,#minute,#second{
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            top: 0;
            margin-left: -15px;
        }
        #hour{
            background: url('images/hour.png') no-repeat center center;
        }
        #minute{
            background: url('images/minute.png') no-repeat center center;
        }
        #second {
            background: url('images/second.png') no-repeat center center;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1. 获取标签
        var hour = document.getElementById('hour');
        var minute = document.getElementById('minute');
        var second = document.getElementById('second');

        // 2. 开启定时器 获取当前时间
        setInterval(function(){
            // 2.1 获取当前的时间戳
            var now = new Date();
            // 2.2 获取小时 分钟 秒
            var s = now.getSeconds();
            console.log(s);
            var m = now.getMinutes() + s / 60;
            console.log(m);
            var h = now.getHours() % 12 + m / 60;
            console.log(h);

            // 2.3 旋转
            second.style.transform = 'rotate(${ s * 6}deg)';
            minute.style.transform = 'rotate(${m * 6}deg)';
            hour.style.transform = 'rotate(${h * 30}deg)';
        },10);
    </script>
</body>
</html>